/**
 * jLook 0.2
 * Nice form templates
 * by Sebastian Romano / seba@envero.org 
 *
 */
// global variables
var separator = '-'; // string que separa las cosas que se usan como id y valor
var counter = 1;
var z_actual = 100;
var lastCheckbox = '';

// plugin
jQuery.fn.jLook = function(options){
	var self = this;
	$(this).addClass('jLookForm');
	this.each(function(){
		var actualForm = this;
		$('label', this).addClass("jLookLabel");
		$('input:text', this).addClass("jLookInput");
		$('input:text', this).each(function(){
			$(this).wrap('<div class="jLookInputWrapper"></div>');
			$(this).parent().css("width", $(this).css("width"));
			$(this).focus(function(){
				$(this).addClass("jLookInput_hover");
				$(this).parent().addClass("jLookInputWrapper_hover");
			});
			$(this).blur(function(){
				$(this).removeClass("jLookInput_hover");
				$(this).parent().removeClass("jLookInputWrapper_hover");
			});
		});
		
		//----------------------------------------------------------
		// radio/s
		var lastRadio = '';
		$('input:radio', this).each(function(){
			$(this).before('<a href="#" id="'+$(this).attr("name")+'-'+$(this).attr("value")+'" class="jLookRadio"></a>');
			$(this).remove();
			if(lastRadio != $(this).attr("name")){
				$(actualForm).prepend('<input type="hidden" id="'+$(this).attr("name")+'" name="'+$(this).attr("name")+'" value="null" />');
				lastRadio = $(this).attr("name");
			}
		});
		$('.jLookRadio').bind('click', radioClick)

		//----------------------------------------------------------
		// checkbox/s
		$('input:checkbox', this).each(function(){
			$(this).before('<a href="#" id="'+$(this).attr("name") + separator + $(this).attr("value")+'" class="jLookCheckbox"></a>');
			$(this).remove();
			if(lastCheckbox != $(this).attr("name")){
				$(actualForm).prepend('<input type="hidden" id="'+$(this).attr("name")+'" name="'+$(this).attr("name")+'" value="null" />');
				lastCheckbox = $(this).attr("name");
			}
		});
		$('.jLookCheckbox').bind('click', checkboxClick);
		
		//---------------------------------
		// select/s
		$('select', this).each(function(){
			var nam = $(this).attr('name')+'_wrapper';
			$(this).wrap('<div class="jLookSelectWrapper" id="' + nam + '"></div>');
			var name = $(this).attr('name');
			var indiceSeleccionado = this.selectedIndex;
			var selectContentHeader= '<input type="hidden" value="" name="' + name + '" id="' + name + '" /><div class="jLookSelectHeader"><div></div><a href="#" class="jLookSelectOpen"></a></div>';
			var selectContent = '<ul>';
			if(options.selectHeight) var selectContent = '<ul style="overflow:auto; height:' + options.selectHeight + 'px">';
			var index = 0;
			var firstA = '';
			$('option', this).each(function(){
				selectContent += '<li><a href="#" class="jLookSelectOption" id="' +  name + separator + $(this).attr('value') + '">' + $(this).html() + ' </a></li>';
				if(indiceSeleccionado == index){
					selectContentHeader = '<input type="hidden" value="' + $(this).attr('value') + '" name="' + name + '" id="' + name + '" /><div class="jLookSelectHeader"><div>' + $(this).html() + '</div><a href="#" class="jLookSelectOpen"></a></div>';
				}
				if(index == 0){
					firstA = nam.substring(0, nam.indexOf('_')) + "-" + $(this).attr('value');
				}
				$(this).remove();
				index = index + 1;
			});
			selectContent += '</ul>';
			$('#' + nam).html(selectContentHeader + selectContent);
			//绑定事件
			$('.jLookSelectOpen').bind('click', selectClick);
			$('.jLookSelectHeader div').bind('click', selectClick);
			$('.jLookSelectOption').bind('click', optionClick);
			$('#' + firstA).bind('blur', closeOption);
		});

		//--------------------------------------
		//textareas
		$('textarea', this).each(function(){
			$(this).wrap("<div class='jLookTextareaWrapper'></div>");
		});
	});
}


/**
 * 点击复选框
 */
checkboxClick = function(){
	valu = $(this).attr("id").split(separator);
	if($('#'+valu[0]).attr("value") == valu[1]){
		$(this).removeClass('jLookCheckbox_checked'); // uncheck
		$('#'+valu[0]).attr("value", 'null');
	}else{
		$(this).addClass("jLookCheckbox_checked");
		$('#'+valu[0]).attr("value", valu[1]); // selectedValue
	}
	return false;
}

/**
 * 点击单选按钮
 */
radioClick = function(){
	valu = $(this).attr("id").split('-');
	actualValue = $('#' + valu[0]).attr("value");
	if( actualValue != valu[1]){
		$('#' + valu[0] + '-' + actualValue).removeClass('jLookRadio_checked');
		$('#' + valu[0]).attr("value", valu[1]);
		$(this).addClass('jLookRadio_checked');
	}
	return false;
}

/**
 * 点击展开面板
 */
selectClick = function(){
	z_actual = z_actual + 10;
	wrapperId = $(this).parent().parent().attr('id');
	if($('#' + wrapperId).is('.jLookSelectOpened')){
		$('#' + wrapperId).removeClass('jLookSelectOpened');
		$('ul', $('#' + wrapperId)).slideUp('500', function(){
			$('.jLookSelectWrapper').each(function(){
				if($(this).attr('id') != wrapperId){
					$(this).css('position', 'relative');
				}
			});
		});
	}else{
		$('.jLookSelectWrapper').each(function(){
			if($(this).attr('id') != wrapperId){
				$(this).css('position', 'static');
			}
		});
		$('#' + wrapperId).addClass('jLookSelectOpened');
		$('ul', $('#' + wrapperId)).slideDown('500');
	}
	var index = 0;
	$('.jLookSelectOption').each(function(){
		if(index == 0){
			$('#' + $(this).attr('id')).focus();
		}
		index = index + 1;
	});
	return false;
};

/**
 * 选择一项，收缩面板
 */
optionClick = function(){
    valu = $(this).attr('id').split(separator);
    var wrapperId = valu[0] + '_wrapper';
    $('#' + valu[0]).attr('value', valu[1]);
    $('div', $('#' + valu[0] + '_wrapper .jLookSelectHeader')).html($(this).html());
	$('#' + wrapperId).removeClass('jLookSelectOpened');
	$('ul', $('#' + wrapperId)).slideUp('500', function(){
		$('.jLookSelectWrapper').each(function(){
			if($(this).attr('id') != wrapperId){
				$(this).css('position', 'relative');
			}
		});
	});
	return false;
};

/**
 * 失去焦点，收缩面板
 */
closeOption = function(){
    valu = $(this).attr('id').split(separator);
    var wrapperId = valu[0] + '_wrapper';
	$('#' + wrapperId).removeClass('jLookSelectOpened');
	$('ul', $('#' + wrapperId)).slideUp('500', function(){
		$('.jLookSelectWrapper').each(function(){
			if($(this).attr('id') != wrapperId){
				$(this).css('position', 'relative');
			}
		});
	});
	return false;
};

/**
 * Esta funci�n obtiene el campo que el elemento
 * tiene que llenar y lo llena (ya que manejo algunas cosas con hiddens)
 */
setHidden = function(id, value){}